<template>
    <div>
        <!-- <basic-layout title="菜肴点赞" :showFilterBtn="true" :showAddBtn="false" @handleAdd="handleAdd"
            @handleFilter="$refs.queryPopupRef.show = true"> -->
        <basic-layout title="菜肴点赞" :showAddBtn="false">
            <div class="columnFlex">
                <van-row class="search-row">
                    <van-search v-model="formData.keyword" maxlength="20" show-action label="" placeholder="菜肴名称"
                        @search="onRefresh">
                        <template #action>
                            <div @click="onRefresh">搜索</div>
                        </template>
                    </van-search>
                    <div class="filter-icon">
                        <van-icon name="filter-o" @click="$refs.queryPopupRef.show = true" />
                    </div>
                </van-row>
                <!-- 列表 -->
                <van-row class="listCon">
                    <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                        <van-list v-model="loading" :finished="finished" :finished-text="listData.length ? '没有更多了' : ''"
                            @load="onLoad">
                            <van-swipe-cell v-for="val in listData" :key="val.dishId">
                                <div class="itemMain">
                                    <div class="picStyle">
                                        <img
                                            :src="fileUrlObj[val.fileCode] || (loading ? 'images/loading.gif' : 'images/noImgData.png')">
                                    </div>
                                    <div class="rightContent">
                                        <div class="firstContent">
                                            {{val.dishName}}
                                        </div>
                                        <div class="secondContent">
                                            <div class="f">
                                                <span style="color: #989999;">
                                                    {{val.dishCuisineName}}
                                                </span>
                                                <div class="vertical" />
                                                <span style="color: #989999;">
                                                    {{val.flavorTypeName}}
                                                </span>
                                                <div class="vertical" />
                                                <span style="color: #989999;">
                                                    {{val.dishTypeName}}
                                                </span>
                                                <!-- <div class="vertical" />
                                                <span style="color: #989999;">
                                                    {{val.dishCalorie}}
                                                </span> -->
                                            </div>
                                        </div>
                                        <div class="thirdContent" @click="checkType(val)">
                                            <div class="thumbs">
                                                点赞：{{val.thumbsCount}}
                                            </div>
                                            <!-- <div class="imgT">
                                                <van-icon name="good-job-o" v-if="val.checkType==='1'"
                                                    class="colorRed" />
                                                <van-icon name="good-job-o" v-if="val.checkType==='0'"
                                                    class="colorBlack" />
                                            </div> -->
                                            <div >
                                                <van-icon name="good-job-o" v-if="val.checkType==='1'"
                                                    class="colorRed" />
                                                <van-icon name="good-job-o" v-if="val.checkType==='0'"
                                                    class="colorBlack" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </van-swipe-cell>
                        </van-list>
                        <van-empty v-if="!loading && !listData.length" class="custom-image"
                            :image="require('../../../../assets/images/empty.png')" description="暂无数据" />
                    </van-pull-refresh>
                </van-row>
            </div>
        </basic-layout>
        <!-- 筛选条件弹出框 -->
        <queryPopup ref="queryPopupRef" @handleSearch="onRefresh" @handleReset="handleReset">
            <van-form class="filterBox">
                <label>食堂列表</label>
                <van-field>
                    <template #input>
                        <div class="textCon" @click="showPicker = true">
                            <span v-if="!canteenText" style="color: #aaa">请选择食堂列表</span>
                            <span v-else>{{ canteenText }}</span>
                        </div>
                    </template>
                </van-field>
                <!-- <label>关键字</label>
                <van-field v-model="formData.keyword">
                    <template #input>
                    </template>
                
                </van-field> -->
            </van-form>
        </queryPopup>
        <!-- 食堂列表选择 -->
        <van-action-sheet v-model="showPicker" cancel-text="取消" :actions="canteenList" @select="onConfirm" />
        <full-loading v-if="fullLoading"></full-loading>
    </div>
</template>

<script>
    import { queryDic, queryFileList } from '@/api/common';
    import { getCanteenInfoByLoginUser } from '@/api/srvAssurance/smarcatering/oneWeekMenu';
    import { editThumbs, editThumbsCancel, getPage } from "@/api/srvAssurance/smarcatering/dishThumbs";
    // import editForm from "./editForm.vue";
    export default {
        // components: { editForm },
        data() {
            return {
                loading: false,
                fullLoading: false,
                refreshLoading: false,
                showPicker: false,
                finished: false,
                formData: {
                    canteenId: '',
                    keyword: '',
                    pageNum: 1,
                    pageSize: 20
                },
                canteenText: "",
                listData: [], // 列表数据
                canteenList: [], // 食堂列表
                fileUrlObj: {},
            };
        },
        mounted() {
            this.queryDicData();
        },
        methods: {
            checkType(item) {
                if (item.checkType === '0') {
                    editThumbs(item.dishId).then(res => {
                        if (res.code === 1000) {
                            item.checkType = '1';
                            item.thumbsCount = res.data;
                        }
                    })
                }
                if (item.checkType === '1') {
                    editThumbsCancel(item.dishId).then(res => {
                        if (res.code === 1000) {
                            item.checkType = '0';
                            item.thumbsCount = res.data;
                        }
                    })
                }
            },
            // 获取表格数据
            getListData() {
                if (!this.formData.canteenId) {
                    this.finished = true;
                    this.loading = false;
                    return;
                }
                this.loading = true;
                getPage(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                        let fileCodeArr = [];
                        res.data.records.forEach(item => {
                            if (item.fileCode && !this.fileUrlObj[item.fileCode]) {
                                fileCodeArr.push(item.fileCode);
                                this.fileUrlObj[item.fileCode] = '';
                            }
                        })

                        if (fileCodeArr.length) {
                            this.queryFileInfoData(fileCodeArr);
                        }
                    } else {
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            queryFileInfoData(fileCodeArr) {
                this.loading = true;
                queryFileList(fileCodeArr).then(res => {
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            this.fileUrlObj[item.fileCode] = item.url;
                        })
                        this.$forceUpdate();
                        this.loading = false;
                    }
                }).catch(() => {
                    this.loading = false;
                })
            },
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad() {
                this.formData.pageNum++;
                this.getListData();
            },
            // 重置
            handleReset() {
                this.formData = {
                    canteenId: '',
                    keyword: '',
                    pageNum: 1,
                    pageSize: 20
                };
                if (this.canteenList.length) {
                    this.formData.canteenId = this.canteenList[0].canteenId;
                    this.canteenText = this.canteenList[0].canteenName;
                }
                this.onRefresh();
            },
            // 食堂列表选择
            onConfirm(item) {
                this.formData.canteenId = item.canteenId;
                this.canteenText = item.name;
                this.showPicker = false;
                this.onRefresh();
            },
            // 预定状态选择
            // 清空查询条件
            clearPicker() {
                this.formData.keyword = "";
                this.onRefresh();
            },

            // 下拉框数据
            queryDicData() {
                // 食堂列表
                getCanteenInfoByLoginUser().then(res => {
                    if (res.code === 1000 && res.data) {
                        res.data.forEach(item => {
                            item.name = item.canteenName;
                        })
                        this.canteenList = res.data;
                        if (this.canteenList.length) {
                            this.formData.canteenId = this.canteenList[0].canteenId;
                            this.canteenText = this.canteenList[0].canteenName;
                            this.onRefresh();
                        }
                        // this.$nextTick(() => {
                        //     this.$refs.editFormRef.canteenList = this.canteenList;
                        // })
                    }
                })

            }
        },
    };
</script>

<style scoped lang="less">
    .itemMain {
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgb(255, 255, 255);
        color: rgb(51, 51, 51);
        border: 1px solid rgb(220, 223, 230);
        border-radius: 6px;
        height: 100px;
        padding: 10px;

        .picStyle {
            /* background-image: url('../../../../assets/images/care/hair_cut.png'); */
            background-repeat: no-repeat;
            background-size: 100% 100%;
            height: 100px;
            width: 100px;
            background-color: #f9f9f9;
            color: rgb(51, 51, 51);
            border: 1px solid rgb(220, 223, 230);
            border-radius: 6px;

            &>img {
                width: 100%;
                height: 100%;
            }
        }

        .rightContent {
            width: calc(100% - 90px);
            height: 100px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .firstContent {
                height: 25px;
                line-height: 25px;
                font-size: 16px;
                font-weight: 600;
            }

            .secondContent {
                height: 25px;
                line-height: 25px;

                .f {
                    display: flex;
                }

                .s {
                    display: flex;
                }


                .vertical {
                    border: 0.5px solid rgb(204, 204, 204);
                    width: 0px;
                    margin-top: 5px;
                    margin: 6.5px 5px 0px 5px;
                    height: 10px;
                }
            }

            .vertical {
                border: 0.5px solid rgb(204, 204, 204);
                width: 0px;
                margin: 4px 5px 0px 5px;
                height: 10px;
            }

            .thirdContent {
                //height: 50px;
                //line-height: 50px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-right: 30px;

                .thumbs {
                    color: #cec8bd;
                    font-size: 15px;
                }

                .colorRed {
                    width: 100%;
                    height: 100%;
                    font-size: 28px;
                    color: red;
                }

                .colorBlack {
                    width: 100%;
                    height: 100%;
                    font-size: 28px;
                }

                .button {
                    background-color: rgb(215, 165, 80);
                    border: 1px solid rgb(220, 223, 230);
                    border-radius: 20px;
                    width: 70px;
                    height: 33px;
                    color: #FFFFFF;
                    font-size: 17px;
                    font-weight: 600;
                }
            }
        }
    }
</style>